<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2350300097 万朗</title>
    <link rel="stylesheet" href="./css/dataTable.css">
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
    <div class="container">
        <div class="header">
            <h1>实训任务四 - 高级数据表格</h1>
            <p>支持多字段过滤、多字段排序、分页查询</p>
            <p><strong>学号：2350300097 姓名：万朗</strong></p>
        </div>
        
        <!-- 过滤器区域 -->
        <div class="filter-section">
            <div class="filter-title">🔍 数据过滤器</div>
            
            <!-- 单一过滤器 -->
            <div id="singleFilter" class="filter-row">
                <label>字段:</label>
                <select id="filterColumn">
                    <option value="">选择字段</option>
                    <option value="id">ID</option>
                    <option value="name">姓名</option>
                    <option value="number">性别</option>
                    <option value="price">身份信息</option>
                    <option value="madetime">生日</option>
                </select>
                
                <label>操作:</label>
                <select id="filterOperator">
                    <option value="LIKE">包含</option>
                    <option value="=">=等于</option>
                    <option value=">">大于</option>
                    <option value="<">小于</option>
                    <option value=">=">大于等于</option>
                    <option value="<=">小于等于</option>
                    <option value="BETWEEN">范围</option>
                </select>
                
                <label>值:</label>
                <input type="text" id="filterValue" placeholder="输入过滤值">
                <input type="text" id="filterValue2" placeholder="结束值(范围查询)" style="display:none;">
                
                <button class="btn btn-primary" onclick="applyFilter()">应用过滤</button>
                <button class="btn btn-secondary" onclick="clearFilters()">清除过滤</button>
            </div>
            
            <!-- 多重过滤器 -->
            <div id="multipleFilters" style="display:none;">
                <div class="filter-title">多重过滤器</div>
                <div id="filterContainer"></div>
                <div class="filter-row">
                    <button class="btn btn-secondary" onclick="addFilter()">添加过滤条件</button>
                    <button class="btn btn-primary" onclick="applyMultipleFilters()">应用多重过滤</button>
                    <button class="btn btn-secondary" onclick="clearMultipleFilters()">清除多重过滤</button>
                </div>
            </div>

            <div class="filter-row">
                <button class="btn btn-secondary" onclick="toggleMultipleFilters()">切换多重过滤</button>
            </div>
        </div>
        
        <!-- 信息栏 -->
        <div class="info-bar">
            <div>
                <span id="recordInfo">总记录数: 0</span>
            </div>
            <button class="btn btn-success" onclick="goToAddPage()">添加新记录</button>
            <div class="page-size-selector">
                <label>每页显示:</label>
                <select id="pageSize" onchange="changePageSize()">
                    <option value="5">5</option>
                    <option value="10" selected>10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </div>
        </div>
        
        <!-- 数据表格 -->
        <div class="table-container">
            <table class="data-table" id="dataTable">
                <thead>
                    <tr>
                        <th class="sortable" data-column="id">ID</th>
                        <th class="sortable" data-column="name">姓名</th>
                        <th class="sortable" data-column="number">性别</th>
                        <th class="sortable" data-column="price">身份信息</th>
                        <th class="sortable" data-column="madetime">生日</th>
                        <th class="no-sort">操作</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <tr>
                        <td colspan="6" class="loading">正在加载数据...</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination-wrapper">
            <div class="pagination" id="pagination">
                <!-- 分页按钮将通过JavaScript动态生成 -->
            </div>

            <!-- 页面信息显示 -->
            <div class="page-info" id="pageInfo">
                <!-- 页面信息将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 页面跳转控件 - 放在第2页后面 -->
        <div class="page-jump-wrapper">
            <div class="page-jump">
                <label>跳转到第</label>
                <input type="number" id="pageJumpInput" min="1" placeholder="页码">
                <label>页</label>
                <button class="btn btn-primary" onclick="jumpToPage()">跳转</button>
            </div>
        </div>
        
        <!-- 错误信息 -->
        <div id="errorMessage" class="error" style="display:none;"></div>

        <!-- 成功信息 -->
        <div id="successMessage" class="success" style="display:none;"></div>
    </div>



    <script src="./js/dataTable.js"></script>
</body>
</html>
